import React, { Component, lazy, Suspense } from 'react'
import { NavLink, Route } from 'react-router-dom';
import Loading from './loading';
const Home = lazy(() => import('./home'))
const About = lazy(() => import('./about'))
export default class Lazy extends Component {
  render() {
    return (
      <div>
        <div className="container">
          <h1>react-router-dom</h1>
          <div className="row">
            <div className="col-3">
              <div className="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                <NavLink className="nav-link list-group-item-action" to="/home">首页</NavLink>
                <NavLink className="nav-link list-group-item-action" to="/about">关于</NavLink>
              </div>
            </div>
            <div className="col-9">
              <div className="tab-content" id="v-pills-tabContent">
                {/* <Suspense fallback={<h1>loading...</h1>}>
                  <Route path="/home" component={Home}></Route>
                  <Route path="/about" component={About}></Route>
                </Suspense> */}
                <Suspense fallback={<Loading />}>
                  <Route path="/home" component={Home}></Route>
                  <Route path="/about" component={About}></Route>
                </Suspense>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}
